<style scoped>
  .login {
    width: 100%;
    min-height: 660px;
    /*background-image: url('https://file.iviewui.com/iview-admin/login_bg.jpg');*/
    /*background: rgba(205,205,205,0.6);*/
    background-size: cover;
    background-position: center;
    position: relative;
  }
  .login-con{
    position: absolute;
    left: 26%;
    top: 42%;
    transform: translateY(-60%);
    width: 460px;
  }
  .login-header{
     font-size: 16px;
     font-weight: 300;
     text-align: center;
     padding: 30px 0;
   }
  .form-con{
    padding: 10px 0 0;
  }
  .login-tip{
    font-size: 10px;
    text-align: center;
    color: #c3c3c3;
  }

</style>

<template>
    <div class="login" @keydown.enter="handleSubmit">
        <div class="login-con">
            <Card :bordered="false">
                <p slot="title">
                    <Icon type="log-in"></Icon>
                    {{$t('login.welcome')}}
                </p>
                <div class="form-con">
                    <Form ref="loginForm" :model="form" :rules="rules">
                        <FormItem prop="userName">
                            <Input v-model="form.userName" :placeholder="$t('login.account')" name="userName">
                                <span slot="prepend">
                                    <Icon :size="16" type="ios-person"></Icon>
                                </span>
                            </Input>
                        </FormItem>
                        <FormItem prop="password">
                            <Input type="password" v-model="form.password" :placeholder="$t('login.password')" name="password">
                                <span slot="prepend">
                                    <Icon :size="14" type="ios-lock"></Icon>
                                </span>
                            </Input>
                        </FormItem>
                        <FormItem prop="verify">
                            <Input type="text" v-model="form.verify" :placeholder="$t('login.verification')" style="width: 70%;" name="verify">
                                <span slot="prepend">
                                  <Icon :size="14" type="ios-at"></Icon>
                                </span>
                            </Input>
                            <img alt="" :src=imgsrc @click="newVerify" style="width:28%;float: right;margin-top: -32px;height: 32px;"/>
                        </FormItem>
                        <FormItem>
                            <i-button @click="handleSubmit" type="primary" long :loading="loginLoading">{{$t('login.login')}}</i-button>
                        </FormItem>
                    </Form>
                </div>
            </Card>
        </div>
    </div>
</template>
<script>
  let Base64 = require('js-base64').Base64;
export default {
    data () {
        return {
            form: {
                userName: '',
                password: '',
                verify:''
            },
            rules: {
                userName: [
                    { required: true, message: this.$t('login.account'), trigger: 'blur' }
                ],
                password: [
                    { required: true, message: this.$t('login.password'), trigger: 'blur' }
                ],
                verify: [
                  { required: true, message: this.$t('login.verification'), trigger: 'blur' }
                ]
            },
            imgsrc: "",
            loginLoading:false
        };
    },
    methods: {
        newVerify(){
            this.imgsrc = this.$log+'validateCodeServlet?tm='+ Math.random();
        },
        handleSubmit () {
            this.$refs.loginForm.validate(() => {
              var username = this.form.userName
              var pass = this.form.password
              var verify = this.form.verify
              if((username != '') && (pass != '') && (verify != '')){
                this.loginLoading = true;
                /*this.$http({
                  url:this.$log+'login.do',
                  method:'POST',
                  headers: {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
                  },
                  data:'username='+username+'&password='+Base64.encode(pass)+'&validate='+verify
                }).then((response)=>{
                  // console.log(response)
                  var code = response.data.code
                  // console.log(response)
                  if(code == 0){
                    // console.log(response)
                    var users = response.data.user;
                    var allways = users.allways
                    // console.log(allways)
                    if((allways == null) || (allways.size == 0)){
                      this.$Message.error(this.$t('login.noauth'))
                    }else{
                      // 登录验证
                      var username_orders = Base64.encode('username_orders')
                      var dd = Base64.encode('dd')
                      var review = Base64.encode('review')
                      var access_orders = Base64.encode('access_orders')
                      window.sessionStorage.setItem(username_orders, Base64.encode(users.username));
                      window.sessionStorage.setItem(dd, Base64.encode(users.uid))
                      // 验证用户部门，如果是业务部，订单显示不同
                      localStorage.setItem(review, users.deId)         // 用户部门
                      window.sessionStorage.setItem(access_orders, Base64.encode(allways));
                      // 刷新-》菜单的自动更新
                      this.$store.commit('updateMenulist');
                      this.$router.push({
                        name: 'home_index',
                        path: '/index'
                      });
                    }
                    this.loginLoading = false
                  }else{
                    this.$Message.error(response.data.errors)
                    this.loginLoading = false
                  }

                })*/
              }else{
                if(username == ''){
                  this.$Message.error(this.$t('login.account'))
                }else if(pass == ''){
                  this.$Message.error(this.$t('login.password'))
                }else if(verify == ''){
                  this.$Message.error(this.$t('login.verification'))
                }
              }

            });
        }
    },
    created(){
      // 验证码直接请求
      this.newVerify()
    }
};
</script>

<style>

</style>
